Conanan

# Less

less是一门css的预处理语言

  • less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式

  • 在less中添加了许多的新特性：像对变量的支持、对mixin的支持... ...

  • less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，

      所以浏览器无法直接执行less代码，要执行必须向将less转换为css，然后再由浏览器执行

html{
  /* css原生也支持变量的设置 */
  --color:#ff0;
  --length:200px;
}

.box1{
  /* calc()计算函数 */
  width: calc(200px*2);
  height: var(--length);
  background-color: var(--color);
}

.box2{
  width: var(--length);
  height: var(--length);
  color: var(--color);
}

.box3{
  width: var(--length);
  height: var(--length);
  border: 10px solid var(--color);
}

使用 VSCode的 EasyLess插件可以将 Less 转换为 CSS文件，保存时自动生成！

剩下的看文档吧！

← Box Model 盒子模型 →